<template>
  <div id="classInfoIntroduce">
      <div class="curriculum" v-for="(item,index) in dataList" :key="index">
          <div class="curriculumPic">
                <img :src="item.classPic" alt="">
                <div 
                    v-if="item.courseStat !=''"
                    class="courseStat" 
                    :class="item.courseStat ==='升级'?'upgrade':'new'"
                >
                {{item.courseStat}}</div>
                <div 
                    class="author" 
                    v-if="item.author !== '' && item.authorPic !== ''">
                    <img :src="item.authorPic" alt="">
                        <span>{{item.author}}</span>
                </div>
                <div 
                    v-if="item.author == '' && item.className != ''" 
                    class="className">
                    <span>{{item.className}}</span>
                </div>
          </div>
          
          <div class="classCard">
              <p class="classTitle">{{item.classTitle}}</p>
                <div class="classRank">
                    <div >
                        <span>{{item.classRank}}</span>
                        <span><i class="el-icon-user"></i>{{item.viewsNumber}}</span>
                    </div>
                    <div class="evaluate" v-if="item.evaluate !=''">
                        <span>{{item.evaluate}}人评价</span>
                        <!-- 评价详情 -->
                        <div class="evaluationDetail">
                            <div class="flex-c">
                                <span>综合评分</span>
                                <span>10</span>
                                <span>{{item.evaluate}}人评价</span>
                            </div>
                            <div class="flex-c">
                                <span>内容实用:10</span>
                                <span>通俗易懂:10</span>
                                <span>逻辑清晰:10</span>
                            </div>
                        </div>
                    </div>
                </div>
              <p class="classDesc" v-if="item.classDesc != ''">{{item.classDesc}}</p>
              <div>
                  <div class="price-box">
                        <div v-if="!item.free">
                            <div v-if="item.originalPrice != ''">
                                <span class="c-r">￥{{item.price}}</span>
                                <span class="del-text ">￥{{item.originalPrice}}</span>
                            </div>
                            <div v-else>
                                <span>￥{{item.price}}</span>
                            </div>
                        </div>
                        <div v-else>
                            <span>免费</span>
                        </div>
                        <div class="classCollect c-aaa">
                            <i class="el-icon-star-off"></i>
                            收藏
                        </div>
                  </div>
                  
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            // dataList:[
            //     {
            //         id:10001,
            //         className:"JS",
            //         courseStat:'新课',
            //         classPic:"https://img1.sycdn.imooc.com/szimg/5c0493ce000126b106000338-360-202.jpg",
            //         author:"张三",
            //         authorPic:"https://img3.sycdn.imooc.com/5afe3d350001596a02430243-100-100.jpg",
            //         classTitle:"用技术打造小程序简历",
            //         classRank:"入门",
            //         viewsNumber:2333,
            //         classDesc:"小程序简历，别出心裁，让面试官记忆犹新",
            //         price:'1.00',
            //         originalPrice:'69.00',
            //         free:false,
            //         evaluate:''
            //     },
            //     {
            //         id:10002,
            //         className:"JS",
            //         courseStat:'升级',
            //         classPic:"https://img1.sycdn.imooc.com/szimg/5c0493ce000126b106000338-360-202.jpg",
            //         author:"张三",
            //         authorPic:"https://img3.sycdn.imooc.com/5afe3d350001596a02430243-100-100.jpg",
            //         classTitle:"用技术打造小程序简历",
            //         classRank:"入门",
            //         viewsNumber:2333,
            //         classDesc:"小程序简历，别出心裁，让面试官记忆犹新",
            //         price:'1.00',
            //         originalPrice:'69.00',
            //         free:true,
            //         evaluate:1
            //     },{
            //         id:10003,
            //         className:"JS",
            //         courseStat:'新课',
            //         classPic:"https://img1.sycdn.imooc.com/szimg/5c0493ce000126b106000338-360-202.jpg",
            //         author:"",
            //         authorPic:"",
            //         classTitle:"用技术打造小程序简历",
            //         classRank:"入门",
            //         viewsNumber:2333,
            //         classDesc:"小程序简历，别出心裁，让面试官记忆犹新",
            //         price:'1.00',
            //         originalPrice:'69.00',
            //         free:false,
            //         evaluate:''
            //     },
            //     {
            //         id:10004,
            //         className:"HTML/CSS",
            //         courseStat:'新课',
            //         classPic:"https://img1.sycdn.imooc.com/szimg/5c0493ce000126b106000338-360-202.jpg",
            //         author:"",
            //         authorPic:"",
            //         classTitle:"用技术打造小程序简历",
            //         classRank:"入门",
            //         viewsNumber:2333,
            //         classDesc:"小程序简历，别出心裁，让面试官记忆犹新",
            //         price:'1.00',
            //         originalPrice:'69.00',
            //         free:false,
            //         evaluate:''
            //     },{
            //         id:10005,
            //         className:"JS",
            //         courseStat:'',
            //         classPic:"https://img1.sycdn.imooc.com/szimg/5c0493ce000126b106000338-360-202.jpg",
            //         author:"张三",
            //         authorPic:"https://img3.sycdn.imooc.com/5afe3d350001596a02430243-100-100.jpg",
            //         classTitle:"用技术打造小程序简历",
            //         classRank:"入门",
            //         viewsNumber:2333,
            //         classDesc:"小程序简历，别出心裁，让面试官记忆犹新",
            //         price:'1.00',
            //         originalPrice:'',
            //         free:false,
            //         evaluate:''
            //     },
            //     {
            //         id:10006,
            //         className:"JS",
            //         courseStat:'',
            //         classPic:"https://img1.sycdn.imooc.com/szimg/5c0493ce000126b106000338-360-202.jpg",
            //         author:"张三",
            //         authorPic:"https://img3.sycdn.imooc.com/5afe3d350001596a02430243-100-100.jpg",
            //         classTitle:"用技术打造小程序简历",
            //         classRank:"入门",
            //         viewsNumber:2333,
            //         classDesc:"小程序简历，别出心裁，让面试官记忆犹新",
            //         price:'',
            //         originalPrice:'',
            //         free:true,
            //         evaluate:'658'
            //     }
            // ]
        }
    },
    props:['dataList']

}
</script>

<style>
@import url('../assets/css/classInfoIntroduce.css');
</style>